<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/issue.css" />
</head>

<body>
	<div id="app" class="content">
		<div class="name">
			<span class="title m-b-10">宝贝名称</span>
			<div class="input p-b-10">
				<input type="text" v-model="usecTitle" placeholder="最多20个字" />
			</div>
			<span class="title m-b-10 m-t-15">宝贝价格</span>
			<div class="input p-b-10">
				<span>￥</span>
				<input type="number" v-model="usecPrice" @blur="priceTap" placeholder="输入宝贝价格" />
			</div>
		</div>
		<div class="photo">
			<span class="title m-b-10">活动展示图</span>
			<span class="font-c-7f m-b-10">最少不能低于3张图片，首图为默认头图</span>
			<div class="img-wapper">
				<div class="preview" v-for="(item,index) in listImg" v-if="listImg.length > 0">
					<i class="delete" @click="deleteClick(index)"></i>
					<img :src="item" @click="getItemImgClick(index)">
				</div>
				<div class="button" @click="addImgClick">
					<img src="../../../images/add.png">
				</div>
			</div>
		</div>
		<div class="details m-t-25">
			<span class="title m-b-10">物品描述</span>
			<textarea rows="5" cols="2" v-model="usecdDetails" placeholder="物品描述"></textarea>
		</div>
		<div class="botton-wapper" @click="issueTap">发布</div>
	</div>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		mui.plusReady(function(){
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
		})
		var app = new Vue({
			el: "#app",
			data: {
				listImg: [],
				usecTitle: '',
				usecPrice: '',
				usecdDetails: '',
			},
			methods: {
				issueTap: function () { // 发布方法,
					var issueData = {
						usecTitle: this.usecTitle,
						usecPrice: this.usecPrice,
						usecdDetails: this.usecdDetails
					}
					var isGo
					if (this.listImg.length == 0) { // 判断图片是否填写完整
						mui.toast('请上传图片')
						isGo = false
					} else {
						if(this.listImg.length < 3) {
							isGo = false
							mui.toast('不能低于3张图片')
						}else {
							isGo = true
						}
						
					}

					this.verification(issueData, function (sate) { // 判断所有值都是否填写完整
						if (!sate) {
							isGo = false
							return
						}
					})

					console.log(isGo)
					if (isGo) {
						console.log('调接口')
						this.PostUsedCommodity(issueData) // 调用发布接口
					}
				},


				PostUsedCommodity: function (data) { //post发布接口 
					var that = this;
					var userID = Util.getState('$state').userID;
					mui.post(Util.HTTP + 'api/UsedCommodity/PostUsedCommodity', {
						userID: userID,
						usecTitle: data.usecTitle,
						usecPrice: data.usecPrice,
						usecdDetails: data.usecdDetails,
					}, function (res) {
						if (res.code == '1001') {
							// 发布成功后调用图片方法
							that.UsedCommodityImg(res.data, function (seta) {
								// callback上传回调事件
								if (seta) {
									mui.toast('发布成功')
								} else {
									mui.toast('上传图片失败，未能发布')
								}
								setTimeout(function () {
									mui.back()
									var list = plus.webview.currentWebview().opener();
									//触发父页面的自定义事件(refresh),从而进行刷新
									mui.fire(list, 'issueBack');
									//返回true,继续页面关闭逻辑
									return true;
								}, 1000)
							})
						} else {
							mui.toast(res.message)
						}
					})
				},

				UsedCommodityImg: function (filesBizID, callback) { // 图片方法 调用上图片接口
					var that = this
					var server = Util.HTTP + 'api/UsedCommodity/UsedCommodityImg';
					var imgList = that.listImg;
					var wt = plus.nativeUI.showWaiting();
					var task = plus.uploader.createUpload(server, {
							method: "POST"
						},
						function (t, status) { //上传完成
							if (status == 200) {
								wt.close(); //关闭等待提示按钮
								callback(true) // 上传成功回调事件
							} else {
								alert("上传失败：" + status);
								wt.close(); //关闭等待提示按钮
								callback(false) // 上传失败回调事件
							}
						}
					);
					//添加其他参数
					task.addData("filesBizID", filesBizID);
					imgList.forEach(function (item, num) {
						task.addFile(item, {
							key: item
						});
					})
					task.start();
				},
				getItemImgClick: function (num) {
					var listImg = this.listImg
					plus.nativeUI.previewImage(listImg, {
						current: num
					})
				},
				deleteClick: function (num) {
					this.listImg.splice(num, 1)
				},
				addImgClick: function () {
					var that = this
					// 从相册中选择图片
					mui.toast('最多选择6张');
					plus.gallery.pick(function (e) {
						var lfs = e.files;
						that.listImg = e.files
					}, function (e) {
						mui.toast('取消选择图片');
					}, {
						filter: 'image',
						multiple: true,
						maximum: 6,
						system: false,
						onmaxed: function () {
							plus.nativeUI.alert('最多只能选择6张图片');
						}
					});
				},

				verification: function (data, callback) { // 字符串遍历 判断是否都填写完整
					Object.keys(data).forEach(function (key) {
						if (!data[key]) {
							mui.toast("请填写完整")
							return callback(false)
						}
					});
				},



				priceTap: function () {
					var price = parseFloat(this.usecPrice)
					this.usecPrice = price.toFixed(2)
				},
				getItemImgClick: function (num) {
					var listImg = this.listImg
					plus.nativeUI.previewImage(listImg, {
						current: num
					})
				},
				deleteClick: function (num) {
					this.listImg.splice(num, 1)
				},
				addImgClick: function () {
					var that = this
					// 从相册中选择图片
					mui.toast('最多选择6张');
					plus.gallery.pick(function (e) {
						var lfs = e.files;
						that.listImg = e.files
					}, function (e) {
						mui.toast('取消选择图片');
					}, {
						filter: 'image',
						multiple: true,
						maximum: 6,
						system: false,
						onmaxed: function () {
							plus.nativeUI.alert('最多只能选择6张图片');
						}
					});
				},
			},
		})
	</script>
</body>

</html>
